<template>
	<div id="content-container" :style=" {'padding-top':paddingTop+'px'}">
		<div class="drag-here-box" v-show="isEdit && !componentsLength">
        <div class="drag-here">
            拖拽到此处
        </div>
    </div>
		<slot></slot>

	</div>
</template>
<script>
	import { getPageNameOrVirtualPageName } from "../../utils/getPageName";
	import { getPageTree } from "../../utils/getPageTree";
	import { mapGetters } from "vuex";
	export default {
		data() {
			return {
				paddingTop: 0
			}
		},
		computed: {
			...mapGetters([
				"getRouterLifeCycleOfName",
			]),
			defaultVirtualDomObject() {
				return {
					header: [],
					content: [],
					footer: []
				}
			},
			pageName() {
				// return this.getRouterLifeCycleOfName;
				return getPageNameOrVirtualPageName();
			},
			pageTree() {
				// console.log("content-container页面的", getPageTree(this, this.pageName.name));
				return getPageTree(this, this.pageName);
				// return ;
			},
			componentsLength() {
				if(this.pageTree.content) {
					return Object.keys(this.pageTree.content).length;
				}
				return true;
			},
			//判断环境
			isEdit() {
				return window.environment === "edit";
			}
		},
		created() {

			PSEvent.listen('headerHeightOnChange', this.refresh)
		},
		methods: {
			refresh() {
				this.$nextTick(() => {
					var headerContainer = document.querySelector('.headerContainer')
					this.paddingTop = headerContainer ? headerContainer.offsetHeight : 0
				})
			}
		},
		beforeDestroy() {
			PSEvent.remove && PSEvent.remove('headerHeightOnChange', this.refresh)
		}
	}
</script>
<style scoped>
	#content-container {
		/* flex: 1;
    overflow-y: auto; */
		/* min-height: 200px; */
	}
	
	.drag-here-box {
		display: flex;
		justify-content: center;
		width: 100%;
	}
	
	.drag-here {
		width: 90%;
		height: 180px;
		border: 2px dashed #ddd;
		color: #999;
		font-size: 24px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>